<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-box" :style="{marginTop:getStatusBarHeight()+'px',paddingRight:getNavBarWidth()+'px'}">
			<input type="text" placeholder="搜索商品名称" class="search-input" />
		</view>

		<!-- 轮播图 -->

		<uni-swiper-dot class="swiper-box" :info="bannerList" :current="current" field="image">
			<swiper class="banner" mode="dot" autoplay interval="3000" @change="swiperChange">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item.image" class="banner-image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 新闻简报 -->
		<view class="news">
			<text class="news-title">新闻简报</text>
			<text class="news-content">本商城为测试站，请勿真实下单~</text>
			<uni-icons type="right" size="15"></uni-icons>
		</view>

		<!-- 功能分类 -->
		<view class="category-grid">
			<view class="category-item" v-for="(item, index) in categories" :key="index">
				<uni-icons custom-prefix="iconfont" :type="item.icon" size="30" color="#FF0000"></uni-icons>
				<text class="category-name">{{item.name}}</text>
			</view>
		</view>

	</view>
</template>

<script setup>
	
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		$Login
	} from '../../api/login';
	import {
		getStatusBarHeight,
		getNavBarWidth
	} from '../../utils/system.js'

	const current = ref(0)

	const swiperChange = (e) => {
		current.value = e.detail.current
	}
	const bannerList = ref([{
			image: '/static/images/q.jpg'
		},
		{
			image: '/static/images/q70.jpg'
		},
		{
			image: '/static/images/SSD.jpg'
		},
		{
			image: '/static/images/stor.jpg'
		}
	])
	const categories = ref([{
        name: '全部商品',
        icon: 'icon-all'
    },
    {
        name: '新闻资讯',
        icon: 'icon-news'
    },
    {
        name: '领优惠券',
        icon: 'icon-youhuiquan'
    },
    {
        name: '助力砍价',
        icon: 'icon-kanjia'
    },
    {
        name: '精品推荐',
        icon: 'icon-jingpintuijian'
    },
    {
        name: '限时秒杀',
        icon: 'icon-xianshimiaosha'
    },
    {
        name: '用户足迹',
        icon: 'icon-yonghuzuji'
    },
    {
        name: '积分商城',
        icon: 'icon-jifenshangcheng'
    },
    {
        name: '幸运转盘',
        icon: 'icon-xingyunzhuanpan'
    }
])
	const login = async () => {
		let result = await $Login({
			"grant_type": "password",
			"username": "admin",
			"password": "123"
		})
	}
	onMounted(() => {
		login()
	})
</script>

<style scoped lang="scss">
	@import '@/static/iconfont.css';
	.container {
		padding-bottom: 100rpx;
	}

	.search-box {
		padding: 10rpx 20rpx;
		background: #f50000;
	}

	.search-input {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		text-align: center;
	}

	.banner {
		height: 300rpx;
	}

	.banner-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.news {
		padding: 20rpx;
		background: #FFFFFF;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
	}

	.news-title {
		color: #FF0000;
		font-weight: bold;
		margin-right: 20rpx;
		font-size: 28rpx;
	}

	.news-content {
		flex: 1;
		color: #333333;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.category-grid {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		background: #FFFFFF;
	}

	.category-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.category-name {
		margin-top: 10rpx;
		font-size: 24rpx;
	}

	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		border-top: 1rpx solid #EEEEEE;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 6rpx;
	}

	.tab-name {
		font-size: 24rpx;
	}
	
</style>
